
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGIS</title>
    <link href="./iframe/antd.min.css" rel="stylesheet" />
    <link href="./webGL/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <link href="./iframe/css/font_577982_beimm7aom3g.css" rel="stylesheet" />
    <link href="./iframe/css/geoFont/iconfont.css" rel="stylesheet" />
    <style>
      .ant-input{
    background: transparent;
    border: 1px solid #545c64
}
#draggable {
  background-color: rgba(25, 40, 58, 0.6);
  border-width: 0;
  color: #ffffff;
  margin-left: 30px;
  padding: 0 15px 0;
}
#draggable  .ant-slider-mark-text {
    color: #ffffff;
}
#draggable .sm-profile3d-content {
    background-color: transparent;
  }
#draggable .sm-content {
    background-color: transparent;
  }
#draggable.GafMapProfile .draggable .header {
    background: transparent;
   }
#treeComponent  .ant-tree li .ant-tree-node-content-wrapper:hover{
    background-color: transparent;
}
#treeComponent   .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected{
    background-color: transparent;
}
#treeComponent  .ant-input {
    color: #ffffff;
    background-color: transparent;
  }
#treeComponent   .ant-input-search-icon {
    color:#ffffff;
  }
#treeComponent   .ant-tree-checkbox-inner {
    background-color: transparent;
}
.bottom {
  position: absolute;
  right: -138px;
  bottom: 20px;
}
.map-type p{
  float: right !important;
  background-size: cover !important;
}
.ant-tooltip-inner{
  background-color: black;
  
}
.Treetooltip {
  z-index: 10000;
}
    </style>
    <link rel="stylesheet" href="./iframe/iview.css" />
    <script src="./iframe/vue.min.js"></script>
    <script src="./iframe/iview.js"></script>
    <script src="./webGL/Cesium/Cesium.js"></script>
    <script src="./iframe/antd.min.js"></script>
    <script src="./iframe/gafmapui.umd.min.js"></script>
    <script src="./iframe/vue-iclient3d-webgl.min.js"></script>
    <script src="./iframe/echarts.min.js"></script>
    <script src="./iframe/tooltip.js"></script>
    <script src="./iframe/axios.min.js"></script>
    <script src="./classic/SuperMap.Include.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
       new Vue({
          el: '#app',
          template: `<div>
    <gaf-map-basic-element v-if="loaded"/>
    <gaf-map-viewer
      :mvtLayerList="mvtLayerList"
      :smSceneList="smSceneList"
      :smSceneDataList="smSceneDataList"
      :smLayerList="smLayerList"
      :tinDemLayerList="tinDemLayerList"
      :gridDemLayerList="gridDemLayerList"
      :tiandituLayerList="tiandituLayerList"
        :token="token"
        @initialize="onViewerLoaded"
        ></gaf-map-viewer>
    <div v-if="mapApp">
        <gaf-map-tool-bar-horizontal v-for="horizontalToolbar in mapApp.horizontalToolbars" :content="horizontalToolbar.buttons" :position="horizontalToolbar.position"/>
        <gaf-map-tool-bar-vertical v-for="verticalToolbar in mapApp.verticalToolbars" :content="verticalToolbar.buttons" :position="verticalToolbar.position"/>
        <gaf-map-draggable
        visible="true"
        title="资源目录"
        :width="280"
        >
        <gaf-map-tree
        :replaceFields="mapApp.resourceTree.replaceFields"
        :data-list="mapApp.resourceTree.allDataList"
        :searchInputShow="true"
        :check="onTreeNodeChecked"
        :select="onSelect"
        :allCheckable="false"
        :leafnodeCheckable="true"
        :someNodeCheckable="false"
        />
        </gaf-map-draggable>
        <gaf-map-bottom
        @mapBottomChange="handleMapBottomChange"
        :bottomList="mapApp.bottomLayers"
        />
    </div>
</div>`,
          name: 'GafMapViewer',
        data() {
          return {
            loaded: false,
            mapApp: null,
            location: null,
            layerList: [],
            token: null,
            bottomLayer: null,
          }
        },
        beforeCreate() {
          Vue.prototype.$bus = new Vue()
          Vue.prototype.$mapActions = gafmapui.mapActions
        },
        computed: {
          mvtLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'MVT'
            )
          },
          smSceneList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTREALSPACE'
            )
          },
          smSceneDataList() {
            const data = this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTREALSPACE-DATA'
            )
            return data
          },
          tinDemLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'TIN_DEM'
            )
          },
          gridDemLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'GRID_DEM'
            )
          },
          smLayerList() {
            return this.layerList.filter(
              (item) => item && item.resourceTag === 'RESTMAP'
            )
          },
          tiandituLayerList() {
            return this.layerList.filter(
              (item) =>
                item &&
                item.resourceTag === 'MAPWORLD' &&
                item.isBaseLayer === true
            )
          },
        },
        watch: {
          "location":{
            immediate:true,
            handler:function(val){
            // 这样会触发
              console.log('xxxxxxxx',val)
            }
          }
        },

        methods: {
          getQueryVariable(variable) {
            let query = window.location.search.substring(1)
            let vars = query.split('&')
            for (let i = 0; i < vars.length; i++) {
              let pair = vars[i].split('=')
              if (pair[0] == variable) {
                return pair[1]
              }
            }
          },
          async loadAppConfig() {
            const self = this
            const previewCode = self.getQueryVariable('previewCode')
            let url = 'http://localhost:8763/map/webgis-apps/test-one/config'
            if (previewCode != undefined) {
                url += '?previewCode=' + previewCode
            }
            const response = await axios.get(url)
            const mapApp = response.data.data
            debugger
            self.location = mapApp.location
            if (
              mapApp.bottomLayers !== null &&
              mapApp.bottomLayers.length > 0
            ) {
              const bottomLayer = mapApp.bottomLayers.filter(
                (item) => item.isDefault
              )
              if (bottomLayer.length > 0) {
                self.bottomLayer = bottomLayer[0]
              } else {
                self.bottomLayer = mapApp.bottomLayers[0]
                mapApp.bottomLayers[0].isDefault = true
              }
              self.layerList = [self.bottomLayer]
            }
            self.token = mapApp.token
            self.mapApp = mapApp
          },
          handleMapBottomChange(resourceId) {
            this.layerList.splice(0, 1)
            this.bottomLayer = this.mapApp.bottomLayers.filter(
              (item) => item.resourceId === resourceId
            )[0]
            this.layerList.unshift(this.bottomLayer)
          },
          onTreeNodeChecked(checkedKeys, info) {
            const self = this
            const layerList = []
            checkedKeys.forEach((key) => {
              const data = self.mapApp.resourceTree.allDataList.find((item) => {
                return item.resourceId.toString() === key.toString()
              })
              if (data) {
                layerList.push(data)
              }
            })
            if (self.bottomLayer != null) {
              layerList.unshift(self.bottomLayer)
            }
            self.layerList = layerList
          },
          onSelect2(selectedKeys, info) {
            const self = this
            const selectedKey = selectedKeys[0]
            const layers = self.layerList.map((item) => {
              if (item.resourceId === selectedKey) {
                const newLayer = { ...item, location: true }
                return newLayer
              }
              return item
            })
            this.layerList = layers
          },
          onSelect(selectedKeys, info) {
            const self = this;
            if (!selectedKeys.length) {
                selectedKeys = self.allSelectedKeys;
            } else {
                self.allSelectedKeys = selectedKeys;
            }

            self.onSelect2(selectedKeys, info);
            if(true) {
                let sceneLayers = window.SMWEBGIS.sceneLayers[selectedKeys[0]] || {};
                if (self.screenId) {
                sceneLayers =
                    window["sceneViewer" + self.screenId].sceneLayers[selectedKeys[0]];
                }
                console.log("sceneLayers", sceneLayers);
                if (sceneLayers) {
                const { destination, layer, layers, visible } = sceneLayers;
                if (
                    layers &&
                    layers[0] &&
                    layers[0].layerInfo &&
                    layers[0].layerInfo.cameraCoordinate
                ) {
                    flyTo(layers[0].layerInfo.cameraCoordinate, window[self.sceneName]);
                } else if (destination && visible) {
                    window.viewer.camera.flyTo({ destination });
                } else if (layer) {
                    window.viewer.flyTo(layer);
                }
                }
            }},
          onViewerLoaded() {
            this.loaded = true
            const toolMethods = this.$mapActions
            toolMethods.setView({
              altitude: 169.75064630011397,
              heading: 6.283185307179586,
              latitude: 30.584125661226473,
              tilt: 80.76092553923964,
              longitude: 114.35792029762224,
            })
          },
        },
        beforeMount() {
          this.loadAppConfig()
        },
        })
    </script>
  </body>
</html>
